<template>
  <div class="managePage" >
    <div class="wrap" style="padding-bottom:20px;">
      <el-col style="margin-top:30px;padding-bottom: 20px;" :span=8>
        <el-button @click="create()" type="primary" class="new" size="mini">新增专题</el-button>
        <el-radio-group  v-model="search.sort" @change="select">
          <el-radio  :label="0">按创建时间</el-radio>
          <el-radio  :label="1">按点击量</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span=8 style="margin-left:250px;margin-top:20px;">
        <el-input
            style="height:30px;width: 300px;"
            clearable
            v-model="search.name"
            placeholder="请输入要查询的专题名称">
        </el-input>
          <!-- <el-autocomplete
            style="width:300px;height:30px;"
            class="inline-input"
            v-model="search.name"
            :fetch-suggestions="querySearch"
            placeholder="请输入要查询的专题名称"
            @select="handleSelect">
          </el-autocomplete> -->
      </el-col>
      <el-col class="btn" :span="2" style="margin-left:-30px;margin-top:24px;">
        <el-button  type="primary" @click="doSearch" size="mini">查询</el-button>
      </el-col>
    </div>
    <!--table -->
    <el-table :data="list" v-loading ="loading" class="table"    border style="width:100%;">
      <el-table-column type="index" label="序号"  width="100"></el-table-column>
      <el-table-column label="专题名称" prop="name" width="160" >
      </el-table-column>
      <el-table-column label="专题类型" prop="sort" width="100" >
        <template slot-scope="scope">
            {{scope.row.sort|typeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="creator" width="100">
      </el-table-column>
      <el-table-column label="创建时间" width="160" prop="gmtCreate">
         <template slot-scope="scope">
                  {{ scope.row.gmtCreate|timeFilter }}
        </template>
      </el-table-column>     
      <el-table-column label="阅读量" prop="salesVolume" width="100"></el-table-column>
      <el-table-column label="操作" width="375">
          <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handcopy(scope.$index, scope.row) ">复制链接</el-button>
              <el-button
                  size="mini"
                  type="Success"
                  @click="handleEdit(scope.row.id)">编辑</el-button>
              
              <el-button
                  class="yulan"
                  size="mini"
                  type="primary"
                  @click="handPreview(scope.$index, scope.row)">预览</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              
          </template>
          
      </el-table-column>
    </el-table> 
    <!--分页  -->
    <el-pagination
      style="text-align: right; margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[5, 10, 20]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 预览弹窗 -->
    <el-dialog
      title="专题预览"
      :visible.sync="seeVisible"
      class="addDialog dialogSee"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="40%"
      >
      <!-- <span>这是一段信息</span> -->
      <iframe :src="iframUrl" height="400" width="100%"></iframe >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="seeVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="seeVisible = false">确认</el-button>
        <!-- <el-button size="small" type="primary" @click="seeVisible = false">确认并复制链接</el-button> -->
      </span>
    </el-dialog>

  </div>
</template>

<script>
import topicApi from "@/api/lejv/topic";
import _ from "lodash"; //引入lodash
import { initTime } from "@/utils/index"; //引入时间处理函数
import {queryTopicList,deltopics} from "@/api/lejv/topic"
export default {
  data(){
    return{
      loading:false,
      iframUrl:"",
      mainUrl:"",
      seeVisible:false,
      search:{
        name:'',
        sort:0
      },
      list:[],
      pageSize:5,
      pageNum:1,
      total: 0,
      table:[],
      id:""
    }
    
  },
  created(){
    this.mainUrl = window.location.host.indexOf('tk') != -1 ? (window.location.protocol + "//" + window.location.host + "/tkproDetails/bannerTemplate?id=") : "http://tklifeacuat.mobile.taikang.com/tkproDetails/bannerTemplate?id="
    this.queryTopicList();   
    this.select(0)
  },
  filters:{
    typeFilter(sort){
      if (sort == 0) return  "类型一"
      if (sort == 1) return "类型二"
    },
    timeFilter(val){
      // this.gmtCreate=initTime(times)
      // console.log(this.gmtCreate)
       if (val == null || val == "") {
                return "暂无时间";
            } else{
            let d = new Date(val);   //val 为表格内取到的后台时间
            let month =d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
            let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
            let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
            let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
            return times;
      }
    }
  },
  methods:{
  
    create(){
      this.$router.push("addSub")
    },
    select(val) {
      // this.search.sort = val;
      let item = val 
      let params={
        sort:item,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      }
      // params = _.pickBy(params,(item) =>item) //使用lodash进行过滤参数为空的搜索条件

      topicApi.queryTopicList(params)
      .then((res)=>{
        console.log(res);
        if(res.code==0){
          if(res.data){
            this.list = JSON.parse(JSON.stringify(res.data.topics));
            this.total= res.data.totalElements
          }else {
            this.list=[]
            this.total=0

          }   
        }
      }).catch(res=>{
                this.loading = false
                console.log(res);
                
        
      })
        },
    doSearch(){
      this.pageNum=1
      this.queryTopicList();
    },
     //获取列表
    queryTopicList() {
      this.loading = true;
      let obj ={
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                ...this.search
            } 
      obj = _.pickBy(obj, (item) => item); //使用lodash进行过滤参数为空的搜索条件
      
      topicApi.queryTopicList(obj)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
             this.loading = false;
            if(res.data){
              
              this.list = JSON.parse(JSON.stringify(res.data.topics));
              this.total= res.data.totalElements
            }else{
              this.list=[]
               this.total= 0
            }
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    //复制链接
    handcopy(index,row){
      // this.copyData = row.name;
      this.copyData = this.mainUrl + row.id;
      this.copy(this.copyData);
    },
     copy(data) {
      let url = data;
      console.log(data)
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
          message: "已成功复制专题链接",
          type: "success",
      });
      oInput.remove();
  },
    //编辑
    handleEdit(editId){
      this.$router.push({name:'EditSub',params: { editId } })
    },
    //预览
    handPreview(index,row){
      console.log(row)
      this.seeVisible = true
      // window.location.href='http://tklifeacuat.mobile.taikang.com/tkproDetails/banner'
      // this.iframUrl = row.previewPic ;
       this.iframUrl = this.mainUrl + row.id;
       console.log(this.iframUrl)
    },
    //删除
    // handleDelete(index,rows){
    //   rows.splice(index,1)
    // },
     handleDelete(index, row){
        console.log(row)    
      this.$confirm('确认删除专题?',"删除操作" ,{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        })
        .then(() => {
          topicApi.deltopics(row.id).then((res)=>{
          if(res.code="0")
            this.$message({
                type: 'success',
                message: '已删除专题'
            })
             this.queryTopicList()
          }).catch(res => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })           
              })
            })  
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作!",
            });
          });
                
        },
    handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.queryTopicList();
    },
    handleCurrentChange(val){
        this.pageNum = val;
        this.queryTopicList();
    }

  }
  
};
</script>

<style scoped lang="scss">
.managePage{
  // padding-bottom:20px;
  padding:20px 20px;
  .wrap{
    padding-bottom:20px;
    .new{
      margin-right:40px;
    }
  }
}
  .el-input::v-deep .el-input__inner{
    height:30px !important;
    width:300px;  
    margin-top:5px !important;
  }
  // .el-autocomplete::v-deep .el-input__inner{
  //   height:30px;
  // }
  .table{
    margin-top:20px;
  
}


</style>
